<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    :title="title"
    width="800"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <div class="mb-4">
      <div class="text-base">图片来源</div>
      <el-radio-group v-model="source">
        <el-radio
          v-for="item in options[
            'gallery.GoodsSkuGalleryContents'
          ]?.[0].imageSourceText.filter((item) => item.value != 0)"
          :key="item.value"
          :label="item.value"
          >{{ item.label }}</el-radio
        >
      </el-radio-group>
    </div>
    <div class="mb-4">
      <div class="text-base">图片类型</div>
      <el-radio-group v-model="image_for">
        <el-radio
          v-for="item in options['gallery.GoodsSkuGalleryContents']?.[0].imageForText"
          :key="item.value"
          :label="item.value"
          >{{ item.label }}</el-radio
        >
      </el-radio-group>
    </div>
    <div>
      <div class="flex justify-between mb-2">
        <div class="text-base mt-2">
          图片<span class="text-sm text-[#999999]"
            >(注意:单张图片大小>=5M,推送赛盒将被拦截,请注意图片大小!!!!)</span
          >
        </div>
      </div>
      <VUpload
        :limit="999"
        :validator="validator"
        drag
        :progress="true"
        :multiple="true"
        @success="success"
      >
        <div class="el-upload__text">拖拽文件到这里或 <em>点击上传</em></div>
      </VUpload>
      <div class="border mt-2 flex flex-wrap pt-4 pl-4 upload-box" v-if="fileList.length">
        <div class="w-28 mr-4 mb-4" v-for="(item, index) in fileList" :key="item.url">
          <div class="bg-gray-300 mb-2 relative w-28 h-28">
            <svg-icon
              icon-class="state_fail_cover"
              class="absolute -right-1.5 -top-1.5 text-base text-white z-10"
              @click="handleRemove(index)"
            />
            <VImage :src="item.image_link" :width="112" :height="112"></VImage>
          </div>
          <div class="line1 text-xs">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save()">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="NativeUpload">
import VImage from "@/components/Image/index.vue";
import VUpload from "@/components/VUpload/index.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  customTag: {
    type: String,
    default: () => "",
  },
});
const emits = defineEmits(["uploadFile"]);
let options = reactive(inject("options"));
const source = ref(1);
const imageType = ref(0);
const loading = ref(false);
const visible = ref(null);
const upload = ref(null);
const title = ref("本地上传");

const data = reactive({
  image_for: "",
  image_source: "",
  load: false,
});

const { image_source, image_for, load } = toRefs(data);

const open = async (type, imageSource) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  fileList.value = [];
  visible.value = true;
  imageType.value = type;
  const item = options.value["gallery.GoodsSkuGalleryContents"]?.[0].imageTypeText.find(
    (i) => i.value == type
  );
  title.value = item.label + "本地上传";
  source.value = imageSource || 1;
};
const fileList = ref([]);
const handleRemove = (index) => {
  fileList.value.splice(index, 1);
};
// 选取图片读取尺寸
const uploadAvatar = (file) => {
  let reader = new FileReader();
  reader.onload = function (e) {
    let data = e.target.result;
    // 加载图片获取图片真实宽度和高度
    let image = new Image();
    image.src = data;
    image.onload = () => {
      file.file.width = image.width;
      file.file.height = image.height;
    };
  };
  reader.readAsDataURL(file.file);
};
const close = () => {
  visible.value = false;
};
// 上传图片校验
const validator = (fileInfo) => {
  return (() => {})();
};
const success = (obj) => {
  fileList.value.push({
    image_name: obj.filename,
    image_link: obj["data-show-file"],
    image_source: source.value || "0",
    image_type: imageType.value,
    is_main: false,
    custom_tag: props.customTag,
    usage_status: 1,
    image_size: `${obj.width} * ${obj.height}`,
    show: true,
    image_for: image_for.value,
  });
};
const save = () => {
  if (!fileList.value.length) return ElMessage.error(`请上传图片`);
  const mapfileList = fileList.value.map((item) => {
    item.source = source.value;
    item.image_for = image_for.value;
    return item;
  });

  emits("uploadFile", mapfileList, imageType.value);
  close();
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.typeList {
  display: flex;
  justify-content: space-between;
}

.imageClass {
  border-radius: 4px;
  border: 1px solid #e6e7e9;
  flex: auto;
  margin: 16px 8px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.active {
  background: rgba(51, 102, 241, 0.06);
  border: 1px solid #3366f1;
}

.activeIcon {
  background: #3366f1;
  display: flex;
  justify-content: center;
  align-items: center;

  .icon {
    position: absolute;
    color: #fff;
    display: inline-block;
    margin: auto;
  }
}

.upload-demo {
  :deep(.el-upload--picture) {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

.upload-box {
  min-height: 160px;
}
</style>
